﻿@page "/treeview/multiple-selection"

@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Navigations


@inherits SampleBaseComponent;

<SampleDescription>
  <p> The <a href='https://www.syncfusion.com/blazor-components/blazor-treeview' target='_blank'>Blazor TreeView</a> sample demonstrates the multiple node selection functionalities of the TreeView. To select multiple nodes, press the CTRL key and select the desired nodes; or select any node and by pressing SHIFT key select another node, this selects all the nodes in-between the selected nodes.</p>  
</SampleDescription>
<ActionDescription>
  <p>The TreeView component allows to select multiple nodes by enabling the <code>AllowMultiSelection</code> property. In this demo, the TreeView is enabled with multiple selection. More information about Treeview can be found in this <a href='https://blazor.syncfusion.com/documentation/treeview/multiple-selection/' target='_blank'>documentation</a> section .</p> 
</ActionDescription>

@using Syncfusion
<div class="control-section">
    <div class="control_wrapper">
        <SfTreeView TValue="TreeData" AllowMultiSelection="true">
            <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="Id" ParentID="Pid" Text="Name" HasChildren="HasChild" Expanded="Expanded" Selected="IsSelected"></TreeViewFieldsSettings>
        </SfTreeView>
    </div>
</div>

@code{
    List<TreeData> TreeDataSource = new List<TreeData>();
    
    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeDataSource.Add(new TreeData
        {
            Id = "1",
            Name = "Australia",
            HasChild = true,
            Expanded = true
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "2",
            Pid= "1",
            Name = "New South Wales",
            IsSelected = true


        });
        TreeDataSource.Add(new TreeData
        {
            Id = "3",
            Pid= "1",
            Name = "Victoria"
        });

        TreeDataSource.Add(new TreeData
        {
            Id = "4",
            Pid= "1",
            Name = "South Australia"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "6",
            Pid= "1",
            Name = "Western Australia",
            IsSelected = true

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "7",
            Name = "Brazil",
            HasChild = true
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "8",
            Pid= "7",
            Name = "Paraná"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "9",
            Pid= "7",
            Name = "Ceará"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "10",
            Pid= "7",
            Name = "Acre"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "11",
            Name = "China",
            HasChild = true
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "12",
            Pid= "11",
            Name = "Guangzhou",
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "13",
            Pid= "11",
            Name = "Shanghai"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "14",
            Pid= "11",
            Name = "Beijing"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "15",
            Pid= "11",
            Name = "Shantou"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "16",
            Name = "France",
            HasChild = true

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "17",
            Pid= "16",
            Name = "Pays de la Loire"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "18",
            Pid= "16",
            Name = "Aquitaine"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "19",
            Pid= "16",
            Name = "Brittany"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "20",
            Pid= "16",
            Name = "Lorraine"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "21",
            Name = "India",
            HasChild = true

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "22",
            Pid= "21",
            Name = "Assam"

        });
        TreeDataSource.Add(new TreeData
        {
            Id = "23",
            Pid= "21",
            Name = "Bihar"
        });
        TreeDataSource.Add(new TreeData
        {
            Id = "24",
            Pid= "21",
            Name = "Tamil Nadu"

        });
    }

    class TreeData
    {
        public string Id { get; set; }
        public string Pid { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public bool IsSelected { get; set; }
        public string Name { get; set; }
    }
}
<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>